<template>
    <div>
          <h1>获取不同表单的数值</h1>
          <table>
            <tbody>
                <tr>
                    <th>账号:</th>
                    <td>
                        <input type="text" v-model="data.userName"/>
                    </td>
                </tr>
                <tr>
                    <th>密码:</th>
                    <td>
                        <input type="password" v-model="data.password"/>
                    </td>
                </tr>
                <tr>
                    <th>性别:</th>
                    <td>
                        <input type="radio" name="sex" value="男" v-model="data.sex"/>男
                        <input type="radio" name="sex" value="女" v-model="data.sex"/>女
                    </td>
                </tr>
                <tr>
                    <th>爱好:</th>
                    <td>
                        <input type="checkbox" name="like" value="河北" v-model="data.likes"/>coding
                        <input type="checkbox" name="like" value="河南" v-model="data.likes"/>玩
                        <input type="checkbox" name="like" value="山东" v-model="data.likes"/>看
                        <input type="checkbox" name="like" value="山西" v-model="data.likes"/>休
                    </td>
                </tr>
                <tr>
                    <th>出生日期:</th>
                    <td>
                        <input type="date" v-model="data.birthday"/>
                    </td>
                </tr>
                <tr>
                    <th>个人简介:</th>
                    <td>
                        <textarea cols="50" rows="5" v-model="data.desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <th>头像:</th>
                    <td>
                        <input type="file"/>
                    </td>
                </tr>
                <tr>
                    <th>籍贯</th>
                    <td>
                        <select v-model="data.address">
                            <option value="">请选择</option>
                            <option :value="item.name" v-for="item in address">{{ item.name }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="button" value="获取表单的数值" @click="getValue"/>
                    </td>
                </tr>
            </tbody>
          </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';



let data=reactive
({
        userName:'',
        password:'',
        sex:"男",
        likes:[],
        address:'',
        birthday:'',
        desc:'',
        photo:''
});

let address=ref
([
    {id:1,name:'河北'},
    {id:2,name:'河南'},
    {id:3,name:'山东'},
    {id:4,name:'山西'},
])

const getValue=()=>
{
    console.log(data);
}

</script>

<style scoped>

</style>